:host {
  flex-grow: 1;
  position: relative;
}

@import '../../../styles/variables';

$heading-color: #000088;
$grid-gap: 4px;
$selected-color: #fff;

@media screen and (min-width: 4001px) {
  .atom-container {
    width: 256px;
    height: 256px;
  }
}

@media screen and (min-width: 1600px) and (max-width: 4000px) {
  $periodic-square: 80px;

  .periodic {
    &-grid {
      grid-template-columns: 0 repeat(18, 80px) !important;
      grid-auto-rows: 80px !important;
    }
  }

  .category-selector {
    top: 160px !important;
  }
}

.category-selector {
  position: absolute;
  top: $periodic-square * 2;
  display: flex;
  flex: 0 auto;
  flex-wrap: wrap;
  width: 480px;
  margin-top: 1em;

  .category {
    width: 120px;
    font-size: 0.75em;
    display: inline-block;
    flex: 1 0 21%;
    margin: 5px;
  }
}

.periodic {
  position: relative;

  &-container {
    display: flex;
    justify-content: center;
  }

  &-grid {
    display: grid;
    grid-gap: $grid-gap;
    grid-template-columns: 0 repeat(18, $periodic-square);
    grid-auto-rows: $periodic-square;

    app-atom-category.gap {
      margin-top: 5px;
    }

    .phase-row-1 {
      .solid,
      .liquid {
        padding: 2px;
        font-size: 1em;
        font-weight: bold;
      }

      &.col-1 {
        grid-row: 3;
        grid-column: 7;
      }

      &.col-2 {
        grid-row: 3;
        grid-column: 8;
      }
    }

    .phase-row-2 {
      .gas,
      .unknown {
        padding: 2px;
        font-size: 1em;
        font-weight: bold;
      }

      .unknown {
        color: $unknown-color;
        margin-top: 5px;
      }

      &.col-1 {
        grid-row: 4;
        grid-column: 7;

        .unknown {
          margin-top: 5px;
        }
      }

      &.col-2 {
        grid-row: 4;
        grid-column: 8;
      }
    }

    .selected {
      background: yellow;
    }

    .description {
      grid-row: 2;
      grid-column: 3;
    }

    .atom-details {
      grid-row: 3 / span 2;
      grid-column: 5 / span 2;

      &.show {
        border: 2px solid $border-color;
      }
    }
  }

  &-row-num,
  &-col-num {
    border: 1px solid #ccc;
    color: $heading-color;
    position: relative;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    span {
      width: 100%;
      text-align: center;

      &.index {
        font-size: 1.75em;
      }

      &.description {
        font-size: 0.6em;
        position: absolute;
        bottom: 10%;
      }
    }
  }

  &-row-num {
    grid-column: 1;

    &.one {
      grid-row: 2;
    }

    &.two {
      grid-row: 3;
    }

    &.three {
      grid-row: 4;
    }

    &.four {
      grid-row: 5;
    }

    &.five {
      grid-row: 6;
    }

    &.six {
      grid-row: 7;
    }

    &.seven {
      grid-row: 8;
    }
  }

  &-atom {
    &-1 {
      grid-row: 2;
      grid-column: 2;
    }

    &-2 {
      grid-row: 2;
      grid-column: -2;
    }

    &-3 {
      grid-row: 3;
      grid-column: 2;
    }

    &-4 {
      grid-row: 3;
      grid-column: 3;
    }

    &-5 {
      grid-row: 3;
      grid-column: -7;
    }

    &-6 {
      grid-row: 3;
      grid-column: -6;
    }

    &-7 {
      grid-row: 3;
      grid-column: -5;
    }

    &-8 {
      grid-row: 3;
      grid-column: -4;
    }

    &-9 {
      grid-row: 3;
      grid-column: -3;
    }

    &-10 {
      grid-row: 3;
      grid-column: -2;
    }

    &-11 {
      grid-row: 4;
      grid-column: 2;
    }

    &-12 {
      grid-row: 4;
      grid-column: 3;
    }

    &-13 {
      grid-row: 4;
      grid-column: -7;
    }

    &-14 {
      grid-row: 4;
      grid-column: -6;
    }

    &-15 {
      grid-row: 4;
      grid-column: -5;
    }

    &-16 {
      grid-row: 4;
      grid-column: -4;
    }

    &-17 {
      grid-row: 4;
      grid-column: -3;
    }

    &-18 {
      grid-row: 4;
      grid-column: -2;
    }

    &-19 {
      grid-row: 5;
      grid-column: 2;
    }

    &-20 {
      grid-row: 5;
      grid-column: 3;
    }

    &-21 {
      grid-row: 5;
      grid-column: 4;
    }

    &-22 {
      grid-row: 5;
      grid-column: 5;
    }

    &-23 {
      grid-row: 5;
      grid-column: 6;
    }

    &-24 {
      grid-row: 5;
      grid-column: 7;
    }

    &-25 {
      grid-row: 5;
      grid-column: 8;
    }

    &-26 {
      grid-row: 5;
      grid-column: 9;
    }

    &-27 {
      grid-row: 5;
      grid-column: 10;
    }

    &-28 {
      grid-row: 5;
      grid-column: 11;
    }

    &-29 {
      grid-row: 5;
      grid-column: 12;
    }

    &-30 {
      grid-row: 5;
      grid-column: 13;
    }

    &-31 {
      grid-row: 5;
      grid-column: 14;
    }

    &-32 {
      grid-row: 5;
      grid-column: 15;
    }

    &-33 {
      grid-row: 5;
      grid-column: 16;
    }

    &-34 {
      grid-row: 5;
      grid-column: 17;
    }

    &-35 {
      grid-row: 5;
      grid-column: 18;
    }

    &-36 {
      grid-row: 5;
      grid-column: 19;
    }

    &-37 {
      grid-row: 6;
      grid-column: 2;
    }

    &-38 {
      grid-row: 6;
      grid-column: 3;
    }

    &-39 {
      grid-row: 6;
      grid-column: 4;
    }

    &-40 {
      grid-row: 6;
      grid-column: 5;
    }

    &-41 {
      grid-row: 6;
      grid-column: 6;
    }

    &-42 {
      grid-row: 6;
      grid-column: 7;
    }

    &-43 {
      grid-row: 6;
      grid-column: 8;
    }

    &-44 {
      grid-row: 6;
      grid-column: 9;
    }

    &-45 {
      grid-row: 6;
      grid-column: 10;
    }

    &-46 {
      grid-row: 6;
      grid-column: 11;
    }

    &-47 {
      grid-row: 6;
      grid-column: 12;
    }

    &-48 {
      grid-row: 6;
      grid-column: 13;
    }

    &-49 {
      grid-row: 6;
      grid-column: 14;
    }

    &-50 {
      grid-row: 6;
      grid-column: 15;
    }

    &-51 {
      grid-row: 6;
      grid-column: 16;
    }

    &-52 {
      grid-row: 6;
      grid-column: 17;
    }

    &-53 {
      grid-row: 6;
      grid-column: 18;
    }

    &-54 {
      grid-row: 6;
      grid-column: 19;
    }

    &-55 {
      grid-row: 7;
      grid-column: 2;
    }

    &-56 {
      grid-row: 7;
      grid-column: 3;
    }

    &-57-71 {
      grid-row: 7;
      grid-column: 4;
    }

    &-72 {
      grid-row: 7;
      grid-column: 5;
    }

    &-73 {
      grid-row: 7;
      grid-column: 6;
    }

    &-74 {
      grid-row: 7;
      grid-column: 7;
    }

    &-75 {
      grid-row: 7;
      grid-column: 8;
    }

    &-76 {
      grid-row: 7;
      grid-column: 9;
    }

    &-77 {
      grid-row: 7;
      grid-column: 10;
    }

    &-78 {
      grid-row: 7;
      grid-column: 11;
    }

    &-79 {
      grid-row: 7;
      grid-column: 12;
    }

    &-80 {
      grid-row: 7;
      grid-column: 13;
    }

    &-81 {
      grid-row: 7;
      grid-column: 14;
    }

    &-82 {
      grid-row: 7;
      grid-column: 15;
    }

    &-83 {
      grid-row: 7;
      grid-column: 16;
    }

    &-84 {
      grid-row: 7;
      grid-column: 17;
    }

    &-85 {
      grid-row: 7;
      grid-column: 18;
    }

    &-86 {
      grid-row: 7;
      grid-column: 19;
    }

    &-87 {
      grid-row: 8;
      grid-column: 2;
    }

    &-88 {
      grid-row: 8;
      grid-column: 3;
    }

    &-89-103 {
      grid-row: 8;
      grid-column: 4;
    }

    &-104 {
      grid-row: 8;
      grid-column: 5;
    }

    &-105 {
      grid-row: 8;
      grid-column: 6;
    }

    &-106 {
      grid-row: 8;
      grid-column: 7;
    }

    &-107 {
      grid-row: 8;
      grid-column: 8;
    }

    &-108 {
      grid-row: 8;
      grid-column: 9;
    }

    &-109 {
      grid-row: 8;
      grid-column: 10;
    }

    &-110 {
      grid-row: 8;
      grid-column: 11;
    }

    &-111 {
      grid-row: 8;
      grid-column: 12;
    }

    &-112 {
      grid-row: 8;
      grid-column: 13;
    }

    &-113 {
      grid-row: 8;
      grid-column: 14;
    }

    &-114 {
      grid-row: 8;
      grid-column: 15;
    }

    &-115 {
      grid-row: 8;
      grid-column: 16;
    }

    &-116 {
      grid-row: 8;
      grid-column: 17;
    }

    &-117 {
      grid-row: 8;
      grid-column: 18;
    }

    &-118 {
      grid-row: 8;
      grid-column: 19;
    }

    &-57 {
      grid-row: 9;
      grid-column: 5;
    }

    &-58 {
      grid-row: 9;
      grid-column: 6;
    }

    &-59 {
      grid-row: 9;
      grid-column: 7;
    }

    &-60 {
      grid-row: 9;
      grid-column: 8;
    }

    &-61 {
      grid-row: 9;
      grid-column: 9;
    }

    &-62 {
      grid-row: 9;
      grid-column: 10;
    }

    &-63 {
      grid-row: 9;
      grid-column: 11;
    }

    &-64 {
      grid-row: 9;
      grid-column: 12;
    }

    &-65 {
      grid-row: 9;
      grid-column: 13;
    }

    &-66 {
      grid-row: 9;
      grid-column: 14;
    }

    &-67 {
      grid-row: 9;
      grid-column: 15;
    }

    &-68 {
      grid-row: 9;
      grid-column: 16;
    }

    &-69 {
      grid-row: 9;
      grid-column: 17;
    }

    &-70 {
      grid-row: 9;
      grid-column: 18;
    }

    &-71 {
      grid-row: 9;
      grid-column: 19;
    }

    &-89 {
      grid-row: 10;
      grid-column: 5;
    }

    &-90 {
      grid-row: 10;
      grid-column: 6;
    }

    &-91 {
      grid-row: 10;
      grid-column: 7;
    }

    &-92 {
      grid-row: 10;
      grid-column: 8;
    }

    &-93 {
      grid-row: 10;
      grid-column: 9;
    }

    &-94 {
      grid-row: 10;
      grid-column: 10;
    }

    &-95 {
      grid-row: 10;
      grid-column: 11;
    }

    &-96 {
      grid-row: 10;
      grid-column: 12;
    }

    &-97 {
      grid-row: 10;
      grid-column: 13;
    }

    &-98 {
      grid-row: 10;
      grid-column: 14;
    }

    &-99 {
      grid-row: 10;
      grid-column: 15;
    }

    &-100 {
      grid-row: 10;
      grid-column: 16;
    }

    &-101 {
      grid-row: 10;
      grid-column: 17;
    }

    &-102 {
      grid-row: 10;
      grid-column: 18;
    }

    &-103 {
      grid-row: 10;
      grid-column: 19;
    }
  }
}
